<template>
	<view class="">
		<!-- 会员 -->
		<view class="member">
			<view class="member-item">
				<view class="member-img">
					<image src="@/static/images/man.jpg" alt="" style="width: 100%; height: 100%;">
				</view>
				<view class="member-level">钻石会员</view>
			</view>
			<view class="member-slide">
				<a href="http://www.nnhaoyao.com/user/index">
					<image src="@/static/images/member.png" alt="" style="width: 35px; height: 35px;">
				</a>
				<a @click="Collection">
					<image src="@/static/images/star.png" alt="" style="width: 35px; height: 35px;">
				</a>
			</view>
		</view>

		<!-- 菜单 -->
		<view class="menu">
			<view class="menu-btn">
				<image src="@/static/images/menu.png" alt="" style="width: 20px; height: 20px;">
			</view>
			<view class="menu-slide">
				<a href="javascript:;" class="menu-link" v-for="(item,i) in resData.layerClassAndLayerParamsJSONList" :data-classid="item.id"
				 :data-title="item.classificationName" @click="open_fabric">{{item.classificationName}}</a>
			</view>
		</view>

		<!-- 模特 -->
		<view class="model">
			<!-- <image :src="userData.if_synthesis == 1 ? userData.synthesis_url:'@/static/images/model.png'" w="750" h="1170" alt=""> -->
				<image :src="userData.if_synthesis == 1 ? userData.synthesis_url: '/static/images/model.png' " w="750" h="1170" alt="">
		</view>


		<!-- 底部3按钮 -->
		<view class="tools ft">
			<a href="javascript:;" class="save-btn1" @click="hold_info" data-open="other"></a>
			<a href="javascript:;" class="save-btn2" @click="hold_info" data-open="body"></a>
			<a href="javascript:;" class="share-btn"></a>
		</view>


		<!-- 收藏弹窗 -->
		<view class="recom-popp ft">
			<view class="recom-wrap">
				<a href="javascript:;" class="close"></a>
				<h3>风格</h3>
				<ul>
					<li class="on">
						<p>通勤</p>
					</li>
					<li>
						<p>通勤</p>
					</li>
					<li>
						<p>通勤</p>
					</li>
					<li>
						<p>通勤</p>
					</li>
					<li>
						<p>通勤</p>
					</li>
					<li>
						<p>通勤</p>
					</li>
				</ul>
				<a href="javascript:;" class="g-btn">收藏</a>
			</view>
		</view>


		<!-- 面料选择 -->
		<view class="cloth-popp ft cloth-choice">
			<a href="javascript:;" class="close"></a>
			<view class="cloth-wrap">
				<view class="cloth-title">
					<b>面料</b>
					<h3>{{layerClassName}}</h3>
				</view>
				<view class="cloth-content">
					<!-- <view class="swiper-container cloth-slide">
						<view class="swiper-wrapper">
							<view class="swiper-slide" v-for="(item,i) in fabrics">
								<view :class="user_choice_id != item.id ? 'cloth-pick' : 'cloth-pick on' " @click="choice" :data-id="item.id"
								 :data-ourid="item.fabric_id?item.fabric_id:''">
									<view class="cloth-item">
										<view class="cloth-img">
											<image :src="item.smallUrl" alt="" style="width: 100%; height: 100%;">
										</view>
										<view class="cloth-info">
											<h3>{{item.title}}</h3>
											<span class="cloth-link" @click="fabrics_info" :data-id="item.fabric_id">面料详情 ></span>
										</view>
									</view>
								</view>
							</view>

						</view>
						<view class="swiper-pagination"></view>
					</view> -->
					<!-- <a href="javascript:;" class="g-btn">加载面料</a> -->
					<view class="cloth-scroll">
						<view class="cloth-scroll-layer" v-for="(item,i) in fabrics" :class="user_choice_id != item.id ? 'cloth-pick' : 'cloth-pick on' " @click="choice" :data-id="item.id" :data-ourid="item.fabric_id?item.fabric_id:''">
							
							<view class="cloth-item" >
								<view class="cloth-img">
									<!-- <image src="@/static/images/cloth_03.jpg" alt="" style="width: 100%; height: 100%;"> -->
									<image :src="item.smallUrl" alt="" style="width: 100%; height: 100%;">
								</view>
								<view class="cloth-info">
									<h3>{{item.title}}</h3>
									<!-- <span>羊毛高档毛料</span> -->
									<span class="cloth-link" @click="fabrics_info" :data-id="item.fabric_id">面料详情 ></span>
									<!-- <a href="javascript:;" class="cloth-link"></a> -->
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 面料详情 -->
		<view class="cloth-popp ft cloth-detail">
			<a href="javascript:;" class="detail-close"></a>
			<view class="cloth-wrap">
				<view class="cloth-title">
					<b>面料详情</b>
					<h3>{{layerClassName}}</h3>
				</view>
				<view class="cloth-content">
					<view class="cloth-detail-item">
						<view class="cloth-detail-img">
							<image :src="fabricsInfo.thumb" alt="" style="width: 100%; height: 100%;">
						</view>
						<view class="cloth-detail-info">
							<view class="cloth-detail-top">
								<h3>{{fabricsInfo.title}}</h3>
								<p>{{fabricsInfo.material}}</p>
							</view>
							<view class="cloth-price">
								<p>￥<em>{{fabricsInfo.price}}</em></p>
							</view>
							<view class="cloth-detail-tips">
								<p>克重：无 编号：{{fabricsInfo.goods_no}}</p>
							</view>
						</view>
					</view>
					<view class="cloth-detail-label">
						<ul>
							<li>
								<p><b>品牌：</b>暂无资料</p>
							</li>
							<li>
								<p><b>适用节气：</b>{{fabricsInfo.season}}</p>
							</li>
							<li>
								<p><b>材质：</b>{{fabricsInfo.material}}</p>
							</li>
							<li>
								<p><b>硬软程度：</b>暂无资料</p>
							</li>
							<li>
								<p><b>花色：</b>{{fabricsInfo.colors}}</p>
							</li>
						</ul>
					</view>
					<view class="cloth-detail-p">
						<p><b>面料描述：</b>{{fabricsInfo.title}}</p>
					</view>
					<a href="javascript:;" class="g-btn">加载面料</a>
				</view>
			</view>
		</view>


		<!-- 面料弹出 -->
		<view class="cloth-left">
			<ul>
				<li class="moveLeft" v-for="item in user_record_tip">
					<p>{{item.name}}</p>
					<view class="cloth-bar">
						<view class="cloth-show">
							<image :src="item.imgurl" style="height: 100%;position: absolute;" alt="">
						</view>
						<a href="javascript:;" class="cloth-show-close" @click="close_show" :data-id="item.id"></a>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import {
		flexible
	} from '@/static/js/flexible.js';
	import {
		jquery
	} from '@/static/js/jquery.js';
	import {
		index
	} from '@/static/js/index.js';
	import Swiper from "swiper";

	export default {
		data() {
			return {
				resData: [],
				layerClassId: [],
				layerClassName: '',
				fabrics: [],
				fabricsInfo: '',

				user_choice_id: '',
				user_record_history: '', // 用户记录选择历史
				user_record_tip: [] ,//用户记录选择提示
				userData: [],
				
				options: ''
			}
		},

		mounted() {
			var clothSwiper = new Swiper('.cloth-slide', {

				slidesPerView: 2,
				slidesPerColumn: 3,
				pagination: {
					el: '.swiper-pagination',
					type: 'progressbar',
				},

			})
		},

		/**
		 * 生命周期函数--点击事件集合
		 */
		methods: {
			UserCore() {
				uni.navigateTo({
					url: 'http://www.nnhaoyao.com/user/index'
				})
			},
			Collection() {
				uni.navigateTo({
					url: '/pages/collection/index'
				})
			},
			get_completed() {
				var post_data = {
					id: ''
				}
				this.$http({
					url: 'Customizedapi/Master/completedme_id',
					data: post_data,
					hideLoading: true,
					success: res => {
						this.resData = res.data
						
						this.fabric_omline()
						
						
					}
				})
			},
			
			fabric_omline(){
				this.$http({
					url: 'Customizedapi/Fabric/all_fabrics',
					data: '',
					hideLoading: true,
					success: res => {
						this.fabrics = res.data
						this.get_info()
					}
				})
			},

			open_fabric(e) {
				var layerClassId = e.currentTarget.dataset.classid
				this.layerClassId = layerClassId
				this.layerClassName = e.currentTarget.dataset.title

				// 是否有选择好的面料
				var get_fabrics_id = uni.getStorageSync('layerClassId_' + layerClassId)
				this.user_choice_id = get_fabrics_id ? get_fabrics_id : ''

				this.$http({
					url: 'Customizedapi/Fabric/all_fabrics',
					data: '',
					hideLoading: true,
					success: res => {
						this.fabrics = res.data
						// 打开选项
						$('.cloth-choice').animate({
							'bottom': 0
						}, 300);
					}
				})
			},
			
			fabrics_info(e){
				var gid = e.currentTarget.dataset.id
				var post_data = {
					id: gid
				}
				
				this.$http({
					url: 'Customizedapi/Fabric/fabrics_info',
					data: post_data,
					hideLoading: true,
					success: res => {
						this.fabricsInfo = res.data
						$('.cloth-detail').animate({
							'bottom': 0
						}, 300);
					}
				})
			}, 
			
			choice(e){
				var fabricsId = e.currentTarget.dataset.id // 面料ID
				var layerClassId = this.layerClassId // 图层id
				this.user_choice_id = fabricsId
				uni.setStorage({
					key: 'layerClassId_' + layerClassId,
					data: fabricsId
				})
				uni.setStorage({
					key: 'layerClassId_' + layerClassId + '_ourfaid',
					data: e.currentTarget.dataset.ourid
				})
				$(this).toggleClass('on')
				
				// 提示用户
				this.Tips_user()
			},
			
			Tips_user(){
				var all_data = this.resData.layerClassAndLayerParamsJSONList
				var arr = []
				var info = ''
				for (let i = 0; i < all_data.length; i++) {
					info = uni.getStorageSync('layerClassId_' + all_data[i].id)
					if(info){
						arr[i] = {
							name: all_data[i].classificationName,
							id: all_data[i].id,
							imgurl: this.get_imgurl(info)
						}
					}
				}
				arr = arr.filter(d=>d)
				this.user_record_tip = arr
			},
			
			get_imgurl(e){
				var fabrics_arr = this.fabrics
				
				console.log(this.fabrics)
				for (let i = 0; i < fabrics_arr.length; i++) {
					if(fabrics_arr[i].id == e){
						return fabrics_arr[i].smallUrl
					}
				}
			},
			
			get_info(){
				var post_data = {
					id: this.options.id
				}
				
				this.$http({
					url: 'Customizedapi/User/info_collection',
					data: post_data,
					hideLoading: false,
					success: res => {
						this.userData = res.data
						
						// 进入缓存
						for (let i = 0; i < res.data.user_get_params.length; i++) {
							uni.setStorageSync('layerClassId_' + res.data.user_get_params[i].layerClassId, res.data.user_get_params[i].fabricId);
							uni.setStorageSync('layerClassId_' + res.data.user_get_params[i].layerClassId + '_ourfaid', res.data.user_get_params[i].ourfabricid);
						}
						
						this.Tips_user()
					}
				})
			},
			
			
			// 用户删除选择
			close_show(e){
				var fa_value = e.currentTarget.dataset.id
				uni.removeStorageSync('layerClassId_' + fa_value)
				uni.removeStorageSync('layerClassId_' + fa_value + '_ourfaid')
				// 提示用户
				this.Tips_user()
			},
			
			// 用户保存操作
			hold_info(e){
				var open = e.currentTarget.dataset.open
				
				var all_data = this.resData.layerClassAndLayerParamsJSONList
				const floorArr = Array.from({
					length: all_data.length
				}, (o, i) => ({
					name: all_data[i].classificationName,
					layerClassId: all_data[i].id,
					fabricId: uni.getStorageSync('layerClassId_' + all_data[i].id),
					ourfabricid: uni.getStorageSync('layerClassId_' + all_data[i].id + '_ourfaid')
				}))
				
				var post_data = {
					cid: this.options.id,
					open: open,
					params: JSON.stringify(floorArr)
				}
				
				this.$http({
					url: 'Customizedapi/Composite/my_get_collection2',
					data: post_data,
					method: 'post',
					hideLoading: false,
					success: res => {
						
						// 收藏成功后 清除数据
						for (let i = 0; i < all_data.length; i++) {
							uni.removeStorageSync('layerClassId_' + all_data[i].id)
							uni.removeStorageSync('layerClassId_' + all_data[i].id + '_ourfaid')
						}
						
						uni.showToast({
							title:res.msg,
							duration: 2000,
							mask: true,
							icon: 'none',
						});
					}
				})
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.options = options
			this.get_completed()
			
			
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {
			
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {

		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {

		},
	}
</script>

<style>
	image {
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}
	.cloth-img image {
	    height: 1.466667rem;
	}
	
	.cloth-scroll {
		width: 100%;
		display: flex;
		overflow-x: scroll;
	}
	
	.cloth-item {
		margin: 0.266666rem;
	}
</style>
